<template>
    <div class="hot-race">
        <div class="content">
            <div class="title">
                {{ title.value }}
            </div>
            <div class="item-links">
                <a href="#" v-for="(item, index) in title.info" :key="index" class="i-link">
                    {{ item }}
                </a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Title {
    value: string;
    info: string;
}
interface Props {
    title: Title;
}
defineProps<Props>();
</script>

<style lang="scss" scoped>
.hot-race {
    > .content {
        width: 1200px;
        margin: 20px auto;
        display: flex;
        align-items: baseline;

        > .title {
            font-family: "AlimamaShuHeiTiBold";
            font-size: 28px;
            color: #31363f;
            font-weight: 700;
            margin-right: 30px;
            position: relative;
        }

        > .item-links {
            display: flex;
            margin-right: auto;

            > .i-link {
                font-size: 14px;
                color: #909eab;
                padding-right: 5px;
                margin-right: 15px;
                position: relative;
            }

            > .active {
                color: $main-color;

                &::before {
                    content: "";
                    display: inline-block;
                    position: relative;
                    bottom: -10px;
                    left: 50%;
                    background-color: $main-color;
                    width: 20px;
                    height: 4px;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>
